
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        *{
            list-style: none
        }
        #list1 li{
            border: 1px solid red;
            line-height: 2;
            list-style: none;
        }
    </style>

</head>
<body>
    <article>
        <h2>ecmascript：语言核心</h2>
        <p>变量，语句，表达式，判断，循环，关键字...</p>

        <h2>dom：document object model</h2>
        dom document object model; 文档对象模型
        document, 页面根节点，head body div p span;
        节点也都是对象，跟document对象拥有同样的属性

        <h2>bom：browser object model</h2>
        window document
        history
        navigator
        location
        setInterval/timeout
        alert/prompt/confirm 
    </article>

    <p>document，文档对象模型，文档树，树结构</p>
    <p>作用：通过dom提供的一系列的方法及属性，方便快捷的控制html文档结构</p>
    <p>document是所有节点的根，所有节点都是从document衍生出来的</p>
    <p>document是用对象来表示html文档，每个节点对象都具有相同的dom方法属性</p>
    
    <p>节点：node，指的html里每个元素对象，包括根节点，文本节点...</p> 
    
    <h3>节点查找：</h3>
    <p>获取到节点之后才能继续操作，查到一个之后就自动返回</p>
    <ul id="list1">
        <li>根据id       document.getElementById()</li>
        <li>根据name属性 document.getElementsByName("tet")</li>
        <li>根据tag获取  document.getElementsByTagName()</li>
        <li>根据class    document.getElementsByClassName()</li>
        <li>根据哪个获取 document.querySelector(".list1 p")</li>
        <li>根据哪个获取 document.querySelectorAll()</li>
    </ul>

    <label>
        <input index='123' value="" type="checkbox" checked id="checkbox">同意该协议</label>
    <input type="submit" value="提交" onclick="submit()">

    <h3>节点node属性</h3>
    <ul>
        <li>节点类型nodeType，<br/>
            1元素节点，2属性节点，3文本节点，9文档节点...</li>
        <li>节点名称nodeName，UL LI DIV</li> 历史遗留问题
        <li>标签名称TagName</li>
        <li>获取/设置class：className </li>
        <li>获取/设置id：id</li>
        <li>表单：value checked disabled...</li>
        <li>尺寸偏移：div.offsetWidth  div.offsetHeight  div.offsetLeft ...</li>
    </ul>

    <h3>节点关系</h3>
    <ul>
        <li>first last child parent nodes element sibling next prev</li>

        <li>子元素：childNodes(包含文本)，children</li>
        <li>父元素：parentNode，         parentElement</li>
        <li>第一个子元素：firstChild，   firstElementChild</li>
        <li>最后个子元素：lastChild，    lastElementChild</li>
        <li>上一个元素：previousSibling，previousElementSibling</li>
        <li>下一个元素：nextSibling，    nextElementSibling</li>
    </ul>

    <h3>节点创建</h3>
    <ul>
        <li>元素节点：document.createElement()</li>
    </ul>

    <h3>节点操作</h3>
    <ul>
        <li>插入：insertBefore(newNode, 要插入谁前面)</li>
        <li>追加：appendChild(newNode)</li>
        <li>删除：removeChild(childNode)<br/>
            删除的时候得先获取到要删除的子元素</li>
        <li>修改：replaceChild(newNode, oldNode)</li>
        <li>查询：参考上述 节点查找 + 节点关系</li>
        <li>克隆：cloneNode(是否深层复制true/false)</li>
    </ul>

    <h3>节点属性</h3>
    <ul>
        <li>获取：getAttribute( name )</li>
        <li>设置：setAttribute( name, value )</li>
    </ul>

    <h3>节点样式</h3>
    <ul>
        <li>样式：style，后跟具体样式</li> 
        <li>例如：div.style.borderWitdh = "none"</li>
        <li>style获取的样式，必须在css中定义过</li>
      
        <li>获取元素最终样式：window.getComputedStyle(div, '伪类，一般传null')</li>
    </ul>

    <div class="container">
        <form class="form-inline form-contact">
            <div class="form-group">
                <label for="input-search">搜索</label>
                <input id="input-search" type="text" class="form-control" name="search" placeholder="请输入要搜索的内容">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default btn-search">搜索</button>
            </div>
        </form>
        <table class="table">
          <thead>
            <tr>
              <th>姓名</th>
              <th class="pjf">平均分</th>
              <th>总分</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="7">
                <button type="button" class="btn btn-default btn-1">全部</button>
                <button type="button" class="btn btn-default btn-2">及格</button>
                <button type="button" class="btn btn-default btn-3">不及格</button>
                <button type="button" class="btn btn-default btn-4">正序</button>
                <button type="button" class="btn btn-default btn-5">倒序</button>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    
      <div class="modal fade" id="scoresModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title">修改</h4>
                  </div>
                  <div class="modal-body">
                      <form class="form-scores">
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                      <button type="button" class="btn btn-primary btn-save">保存修改</button>
                  </div>
              </div>
          </div>
      </div>
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="bootstrap/js/bootstrap.min.js"></script>
    
        <script>

            obj = {
                'border-radius': '1px'
            }

            function submit(){
                var input = document.getElementById("input");
                var checkbox = document.getElementById("checkbox");

                if(input.value == ""){
                    alert("不能为空");
                    return;
                }
                
                if(!checkbox.checked){
                    alert("请同意该协议")
                    return;
                }

                alert("提交成功")
            }
            
            // var test = document.getElementById("test");
            // console.log(test);
            
            // var lis = document.getElementsByTagName("li");
            // var lis = document.getElementsByName("li");
            // var lis = document.getElementsByClassName("li");
            // console.log(lis);

            // var article = document.getElementsByTagName("article");
            // var lis = article[0].getElementsByTagName("li");
            // var lisLast = lis[lis.length - 1];

            // lisLast; 原生js

            // var lisLs = document.querySelector("article ul li");
            // var lis = document.querySelectorAll("#id .class div ul li");
            // console.log(lisLs)


            
            var list1 = document.getElementById("list1");
            var lis = list1.getElementsByTagName("li");
            var prev = null;

            for(var i = 0; i < lis.length; i++){
                lis[i].onclick = function(){
            
                    if(prev){
                        prev.style.background = "#fff";
                        prev.style.color = "#000";
                    }
                  
                    prev = this;

                    
                    this.style.background = "red";
                    this.style.color = "green";
                }
            }

            var dataObj = {
        subject: ['数学', '语文', '英语', '地理', '化学'],
        scores: [
            {name: 'tom', scores: [60, 62, 50, 20, 80]},
            {name: 'joy', scores: [50, 60, 50, 60, 60]},
            {name: 'juck', scores: [100, 60, 20, 60, 60]},
            {name: 'juck2', scores: [10, 60, 20, 60, 60]},
            {name: 'juck3', scores: [10, 20, 50, 40, 60]},
        ],
        }, dataArr = [];
        
        var inputSearch = document.querySelector('#input-search');
        var btnSearch = document.querySelector('.btn-search');
        btnSearch.onclick = function(){
        dataArr = dataObj.scores.filter(v => {
            return v.name.indexOf(inputSearch.value) > -1
        })
        randerBody(dataArr);
        }

        var theadtr = document.querySelector('.table thead tr');
        var pjf = document.querySelector('.pjf');
        var tbody = document.querySelector('.table tbody');
        var tfoot = document.querySelector('.table tfoot');

        $(tfoot).on('click', '.btn-1', function(){

        dataArr = [];
        randerBody(dataObj.scores);

        }).on('click', '.btn-2', function(){

        dataArr = dataObj.scores.filter(v => v.pjf >= 60);
        randerBody(dataArr);

        }).on('click', '.btn-3', function(){
        
        dataArr = dataObj.scores.filter(v => v.pjf < 60);
        randerBody(dataArr);

        }).on('click', '.btn-4', function(){
        
        dataArr = dataArr.length ? dataArr : dataObj.scores;
        dataArr.sort((a, b) => {
            return a.pjf - b.pjf;
        });
        randerBody(dataArr);

        }).on('click', '.btn-5', function(){

        dataArr = dataArr.length ? dataArr : dataObj.scores;
        dataArr.sort((a, b) => {
            return b.pjf - a.pjf;
        });
        randerBody(dataArr);

        })

        var modalScores = $("#scoresModal");
        var formScores = document.querySelector('.form-scores');

        tbody.onclick = function(e){
        var tr = e.target.parentNode.parentNode;
        var name = tr.children[0].innerHTML;
        var className = e.target.className;
        if(className.indexOf('btn-del') > -1){
            tbody.removeChild(tr);
            for(var i = 0; i < dataArr.length; i++){
            if(dataArr[i].name == name){
                dataArr.splice(i, 1);
            }
            }
            for(var i = 0; i < dataObj.scores.length; i++){
            if(dataObj.scores[i].name == name){
                dataObj.scores.splice(i, 1);
            }
            }
        } else if(className.indexOf('btn-edit') > -1){
            modalScores
            .data('name', name)
            .data('scores', tr.getAttribute('scores') )
            .modal('show');
        }
        }
        
        modalScores.on('show.bs.modal', function(){
        $(this).find('.modal-title').html('修改-' + $(this).data('name'));
        var scores = $(this).data('scores').split(',');
        $(this).find('.form-control').each(function(i){
            $(this).val(scores[i]);
        })
        })
        .on('click', '.btn-save', function(){
        
        var inputs = formScores.querySelectorAll('.form-control');
        var obj = {
            name: modalScores.data('name'),
            scores: [],
        };
        for (let i = 0; i < inputs.length; i++) {
            obj.scores.push(inputs[i].value);
        }
        modalScores.modal('hide');
        
        dataObj.scores = dataObj.scores.map((v, i) => {
            if(v.name == obj.name) v.scores = obj.scores;
            return v;
        })
        randerBody(dataObj.scores);
        })

        function randerHead(){
        var inputHtml = '';
        dataObj.subject.forEach((v, i) => {
            var th = document.createElement('th');
            th.innerHTML = v;
            theadtr.insertBefore(th, pjf);

            inputHtml += `<div class="form-group">
                <label for="modal-s${i}">${v}</label>
                <input type="number" name="s${i}" class="form-control" id="modal-s${i}" placeholder="请输入${v}分数">
            </div>`;
        })
        formScores.innerHTML = inputHtml;
        }
        
        function randerBody(data){
        var tdStr = '';
        data.forEach(v => {
            tdStr += `<tr scores=${v.scores}>
            <td>${v.name}</td>`;

            v.scores.forEach(s => {
            tdStr += `<td>${s}</td>`;
            })

            tdStr += `<td>${v.pjf}</td>
            <td>${v.all}</td>
            <td>
                <button type="button" class="btn btn-default btn-edit">修改</button>
                <button type="button" class="btn btn-default btn-del">删除</button>
            </td>
            </tr>`;
        })
        tbody.innerHTML = tdStr;
        }

        function initData(){
        dataObj.scores = dataObj.scores.map(v => {
            v.all = v.scores.reduce((a, b) => a * 1 + b * 1);
            v.pjf = (v.all / v.scores.length).toFixed(2);
            return v;
        })
        }

        initData();
        randerHead();
        randerBody(dataObj.scores);
        

        dataObj
        </script>

</body>
</html>